<template>
	<view>
		<view class="note">
			<span class="star">*</span>
			<text class="word">请保存二维码，用微信扫一扫进行人脸核身</text>
		</view>
		<view class="qrcontainer">
			<image style="width: 100%;" :src="face_qrcode" mode="widthFix"></image>
		</view>
		<button class="download" @click="downloadimage">下载保存</button>
		<view class="warning">
			<view class="">
				1. 为方便使用，也可以直接截屏扫码
			</view>
			<view>
				2. 下载保存只能保存到本地微信相册，请移到到系统默认相册
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				face_qrcode: '',
			}
		},
		onLoad(options) {
			this.$API.faceQrcode().then(res => {
				if (1 == res.code) {
					this.face_qrcode = res.data
				}
			})
		},
		methods: {
			downloadimage() {
				uni.downloadFile({
					url: this.face_qrcode,
					success: (res) => {
						console.log(res)
						// if (res.statusCode === 200) {
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success: () => {
								uni.showToast({
									title: '保存成功',
									icon: 'success'
								});
							},
							fail: () => {
								uni.showToast({
									title: '保存失败',
									icon: 'none'
								});
							}
						});
					},
					fail: () => {
						uni.showToast({
							title: '下载失败',
							icon: 'none'
						});
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.note {
		margin-top: 60rpx;
		display: flex;
		flex-direction: row;
		justify-content: center;

		font-style: normal;
		font-weight: 500;
		font-size: 32rpx;
		line-height: 56rpx;
		/* identical to box height, or 175% */
		text-align: center;

		/* 常规文字 */
		color: #606266;


		.star {
			color: #E62020;
		}

		.word {
			margin-left: 12rpx;
		}

	}

	.qrcontainer {
		margin: 156rpx auto 0;
		width: 430rpx;
		height: 430rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		opacity: 1;
		border: 2rpx solid #606266;
		padding: 16rpx;

	}

	.download {

		margin-top: 94rpx;
		width: 264rpx;
		height: 80rpx;

		background: #30D6C2;
		border-radius: 40rpx;

		color: #FFFFFF;

		font-style: normal;
		font-weight: 500;
		font-size: 32rpx;

		/* identical to box height, or 175% */

		color: #FFFFFF;



	}
	.warning {
		padding: 48rpx;
		margin: 130rpx auto;
		font-style: normal;
		font-weight: 400;
		font-size: 28rpx;
		line-height: 56rpx;
		/* identical to box height, or 175% */
		text-align: left;
		
		/* 常规文字 */
		color: #909399;
	}
</style>